<template>
  <div class="footer">
    <div class="lin_footer">
      <div class="lin_footer_list">
        <div>
          <span>Consumer</span>
          <ul>
            <li><a href="">X3</a></li>
            <li><a href="">GO 3</a></li>
            <li><a href="">Ace Pro & Ace</a></li>
            <li><a href="">ONE RS</a></li>
            <li><a href="">ONE RS 1-Inch 360</a></li>
            <li><a href="">X2</a></li>
            <li><a href="">Flow</a></li>
            <li><a href="">Link</a></li>
          </ul>
        </div>
        <div>
          <span>Support</span>
          <ul>
            <li><a href="">Product Support</a></li>
            <li><a href="">Repair Service</a></li>
            <li><a href="">After-Sales Policy</a></li>
            <li><a href="">Care & Extended Warranty</a></li>
            <li><a href="">Downloads</a></li>
          </ul>
        </div>
        <div>
          <span>About us</span>
          <ul>
            <li><a href="">About Insta360</a></li>
            <li><a href="">Press</a></li>
            <li><a href="">Insta360 Blog</a></li>
            <li><a href="">Awards</a></li>
            <li><a href="">Insta360 Think Bold Fund</a></li>
            <li><a href="">Join Us</a></li>
            <li><a href="">Community Forum</a></li>
          </ul>
        </div>
        <div>
          <span>Partners</span>
          <ul>
            <li><a href="">Contact Us</a></li>
            <li><a href="">Become an Affiliate</a></li>
            <li><a href="">Become a Rising Talent</a></li>
            <li><a href="">Become a Reseller</a></li>
            <li><a href="">Invite Friends for Vouchers</a></li>
            <li><a href="">SDK Application</a></li>
            <li><a href="">Enterprise</a></li>
          </ul>
        </div>
        <div>
          <span>Subscribe</span>
          <ul>
            <li><a href="">Get the latest news from Insta360</a></li>
            <li>
              <el-form>
                <el-input v-model="email"  style="width: 190px; height: 20px;" required placeholder="Enter your email"/>
                <el-button type="primary" native-type="submit" icon="Position" style="position: absolute; top: -6px; right: -5px;" color="#626aef"/>
              </el-form>
            </li>
            <li><a href="">Incorrect email format</a></li>
            <li style="font-size: 10px; line-height: 1;">
              *You can learn more about how we handle your user data through our
              <a href="" style="font-size: 10px;" class="privacypolicy">privacy policy.</a>
            </li>
          </ul>
        </div>
        <div style="height: 300px;">
          <span>Professional</span>
          <ul>
            <li><a href="">Pro 2</a></li>
            <li><a href="">Titan</a></li>
            <li><a href="">Pro</a></li>
          </ul>
        </div>
        <div style="height: 300px;">
          <span>Where to buy</span>
          <ul>
            <li><a href="">Online Stores</a></li>
            <li><a href="">Retail Stores</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="lin_footer_information" style="display: none;">
      <div class="lin_footer_information_list">
        <div style="border-bottom: 1px solid gainsboro; line-height: 4px;">
          <ul>
            <li style="margin-bottom: 40px;">
              <p>Arashi Vision Inc</p>
              <p>Call Service: +1 800 692 0360</p>
              <p>Office Hours: Mon-Fri 7:00-17:00 (PST)</p>
            </li>
            <li>
              <a href="#">
                <img>
              </a>
              <a href="#">
                <img>
              </a>
              <a href="#">
                <img>
              </a>
              <a href="#">
                <img>
              </a>
              <a href="#">
                <img>
              </a>
            </li>
          </ul>
        </div>
        <div style="line-height: 12px;">
          <ul>
            <li style="display: block; text-align: left;">
              <p>Download the Insta360 App | User Service Agreement | Privacy Policy | Cookie Settings | Cookie Policy</p>
              <p>Copyright © 2024 ARASHI VISION INC. All Rights Reserved.Guang Dong ICP No. 16095556.</p>
            </li>
            <li>
              <a href="#" class="lin__navHeader_list_right_store_icon" style="top: 3px; left: 2px;">
                <img src="https://static.insta360.com/assets/storage/20200415/7f273ad2c55876014e4375d5752c971e/zh_cn_2x.png" alt="" style="height: 18px;">
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>


    <div class="pay">
      <div class="pay_list">
        <div class="pay-img">
          <a href="#"><img src="https://staticmedia.remo-ai.com/image/default/5F8A11B688AD4EF8BD3B51BEF4CC5774-6-2.png" alt=""></a>
          <a href="#"><img src="https://staticmedia.remo-ai.com/image/default/29630EA0184F4E399E254D948BE1EFE4-6-2.png" alt=""></a>
          <a href="#"><img src="https://staticmedia.remo-ai.com/image/default/FCBE35434C6D4E119EF22AD1B397C741-6-2.png" alt=""></a>
          <a href="#"><img src="https://staticmedia.remo-ai.com/image/default/E0207EBA093748989B5C55888158C1D3-6-2.png" alt=""></a>
          <a href="#"><img src="https://staticmedia.remo-ai.com/image/default/009BBE4809DD4F24A36C51BA632EC55D-6-2.png" alt=""></a>
          <a href="#"><img src="https://staticmedia.remo-ai.com/image/default/8F558138773B471590CC4B3880AAD428-6-2.png" alt=""></a>
          <a href="#"><img src="https://staticmedia.remo-ai.com/image/default/478B63D46E6849EB85B3E76AC6189178-6-2.png" alt=""></a>
          <a href="#"><img src="https://staticmedia.remo-ai.com/image/default/C1DB097C9E79433299AFF61B10635B20-6-2.png" alt=""></a>
          <a href="#"><img src="https://staticmedia.remo-ai.com/image/default/8346B9CBAC0C4BE39F59D8F96BEFBF11-6-2.png" alt=""></a>
        </div>

        <p></p>
        <span>Copyright © 2024 OBSBOT All Rights Reserved.</span>
      </div>
    </div>
  </div>

</template>

<script lang="ts">


  export default defineComponent({
    setup(){
      const data = reactive({
        email: ref()
      })



      return{
        ...toRefs(data)
      }
    }
  })


</script>

<style scoped>
.footer {
  width: 100%;
  height: 100%;
  background-color: #f7f7f7;
  transition: all 1.2s; /* 添加过渡效果 */
}

.lin_footer {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid rgb(214, 214, 214);
  margin-top: 150px;
}

.lin_footer_list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 2fr);
  grid-template-rows: auto;
  gap: 0;
  margin-right: 38px;
  transition: all .3s ease;
  margin-top: 80px;
}
.lin_footer_list div{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
  height: 330px;
  width: 232px;
}


.lin_footer_list div span{
  position: absolute;
  font-weight: bold;
  left: 0;
  top: 20px;
  margin-right: 60px;
  
}

.lin_footer_list div ul {
  position: absolute;
  left: 0;
  padding:0;
  margin:0;
  display: block;
  text-align: left;
  line-height: 30px;
  top: 42px;
}

.lin_footer_list div a {
  font-size: 13px;
  color: rgb(129, 128, 128);
}

.lin_footer_list div a:hover {
  color: black;
}


.lin_footer_information {
  position:relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  line-height: 2px;
}

.lin_footer_information_list div {
  height: 45px;
  width: 1200px;
  margin-bottom: 20px;
  text-align: left;
}

.lin_footer_information_list ul {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.5s; /* 添加过渡效果 */
}

.privacypolicy::before {
  content: '';
  position: absolute;
  border-bottom: 1px solid rgb(0, 0, 0); /* 下划线大小，颜色 */
  width: 0; /* 初始下划线宽度为0，悬停时变化 */
  height: 100%; /* 下划线高度，可以根据需要调整 */
  left: 50%;
  transition: all 0.3s; /* 添加过渡效果 */
}

.privacypolicy:hover::before {
  content: '';
  width: 100%;
  left: 1px;
  display: inline-block;
  font-size: 5px;
}

.privacypolicy:hover {
  font-weight: bold;
  color: rgb(82, 89, 195) !important; 
}

.pay {
  position:relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.pay_list {
  height: 45px;
  width: 1200px;
  margin-bottom: 100px;
}

.pay-img {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.pay-img img {
  height: 30px;
  width: 60px;
  margin-right: 10px;

}

.pay p {
  width: 100%;
  height: 1px;
  background: gray;
}

.pay span {
  font-size: 10px;
}




</style>